<template>
  <van-swipe @change="onChange" :autoplay="3000">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img style="width: 100%;" :src="image.item.pic_url" />
    </van-swipe-item>
    <template #indicator>
        <span class="custom-indicator">
            {{indicatorbar}}
        </span>
    </template>
  </van-swipe>
</template>

<script>
export default {
    props: ['images'],
    data() {
        return {
            idx: 0
        }
    },
    computed: {
        indicatorbar() {
            let arr = Array(6).fill('▂')
            arr.splice(this.idx, 1, '▇')

            return arr.join(' ')
        }
    },
    methods: {
        onChange(idx) {
            this.idx = idx
        }
    }
};
</script>

<style lang="scss" scoped>
    .custom-indicator {
        color: #fff;
        position: absolute;
        right: 5%;
        bottom: 15%;
        font-size: 13px;
    }
</style>